<template>
  <div class="table-container">
    <!-- 消息提示 -->
    <el-alert
      :title="`数据共${total}条`"
      type="info"
      :closable="false"
      show-icon
    >
    </el-alert>
    <!-- /消息提示 -->
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="150">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column label="题型" width="120">
        <template v-slot="{row}">
          {{ row.questionType == '1'? '单选' : row.questionType == '2' ? '多选' : '简答' }}
        </template>
      </el-table-column>
      <el-table-column label="题干" width="300">
        <!-- 报错以及数量问题 -->
        <template v-slot:default="{ row }">
          <div v-html="row.answer"></div>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="180">
        <template v-slot="{row}">{{ row.addDate | parseTime }}</template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="120">
        <template v-slot="{row}">
          {{ row.difficulty == '1'? '简单' : row.questionType == '2' ? '一般' : '困难' }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column prop="chkState" label="审核状态" width="120">
        <template v-slot="{row}">
          {{ row.chkState == '0'? '待审核' : row.questionType == '1' ? '通过' : '拒绝' }}
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="140">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120">
      </el-table-column>
      <el-table-column prop="publishState" label="发布状态" width="120">
        <template v-slot="{row}">
          {{ row.publishState == '1'? '待发布' : row.questionType == '2' ? '已发布' : '已下架' }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template v-slot="{ row }">
          <el-button type="text" size="small" @click="previewQuestion(row.id)">
            预览
          </el-button>
          <el-button
            type="text"
            :disabled="row.chkState === 1"
            size="small"
            @click="auditQuestion(row.id)"
          >
            审核
          </el-button>
          <el-button type="text" size="small" @click="editQuestion(row.id)">
            修改
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="putOnQuestion(row.id, row.publishState)"
          >
            {{ row.publishState === 1 ? "下架" : "上架" }}
          </el-button>
          <el-button
            type="text"
            :disabled="row.publishState === 1"
            size="small"
            @click="delQuestion(row.id, row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- /表格 -->
  </div>
</template>

<script>
// api
import { remove, choicePublish } from "@/api/hmmm/questions";

export default {
  props: {
    total: {
      type: [Number, String],
      required: true,
    },
    tableData: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      user: { age: 22 },
    };
  },
  methods: {
    // 更新表格视图
    uploadTable(){
      this.$emit('uploadTable')
    },
    // 预览
    previewQuestion(id) {
      // 调用父组件的方法，并通知父组件打开兄弟组件的弹框
      this.$emit("previewQuestion", id);
    },
    //审核
    auditQuestion(id) {
      // 调用父组件的方法，并通知父组件打开兄弟组件的弹框
      this.$emit("auditQuestion", id);
    },
    //修改
    editQuestion(id) {
      this.$router.push({ name: "questions-new", query: { id } });
    },
    //上架
    putOnQuestion(id, state) {
      const type = state === 1 ? "下架" : "上架";
      const publishState = state === 1 ? 0 : 1
      this.$confirm(`您确定${type}这道题吗？`, "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
        callback: async (action) => {
          if (action === "cancel") return;
          try {
            await choicePublish({
              id,
              publishState
            })
            // ---------------修改了本地的数据，并没有从服务器更新
            // row.publishState = publishState
            // ---------------建议从服务器修改
            this.uploadTable()
            this.$message.success(`${type}成功`)
          } catch (err) {
            console.log(err);
            this.$message.error(`啊哦，执行${type}失败..`);
          }
        },
      });
    },
    // 删除
    delQuestion(id) {
      this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        callback: async (action) => {
          if (action === "cancel") return;
          // 执行删除操作
          try {
            await remove({ id });
            // 更新视图，服务器没有返回删除之后的视图数据
            // 修改本地数据
            // this.tableData.some((item, i, obj) => {
            //   if (item.id === id) {
            //     obj.splice(i, 1);
            //     return true;
            //   }
            // });
            // 最好从服务器重新获取数据
            // 判断页数在发起请求之后
            this.uploadTable()
          } catch (err) {
            console.log(err);
            this.$message.error("啊哦，删除题失败了..");
          }
        },
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-table {
  margin: 15px 0;
  ::v-deep .el-table__fixed-right {
    background-color: #fff;
  }
}
</style>